<template>
<div style="position: revert">
  <head1/>
  <menu1/>
  <div style="position: absolute;top: 60px;left: 200px">
    <wuxian :data="data"/>
  </div>
  <div style="position:absolute;top: 60px;right: 80px">
    <p>账号：<input type="text" style="width: 70px;height: 20px">
        姓名 <input type="text" style="width: 70px;height: 20px">
      手机号：<input type="text" style="width: 70px;height: 20px">
      <van-button>查询</van-button>
      <van-button>重置</van-button>
  </p>
    <p>
      <van-button style="background-color: cornflowerblue" @click="this.zt=true">+新增</van-button>
      <van-uploader :after-read="afterRead">
        <van-button icon="plus" type="primary">导入</van-button>
      </van-uploader>
      <van-button @click="up">导出</van-button>
    </p >

  </div>

  <div style="position: absolute;top: 220px;right: 130px">
    <div  v-show="zt" style="background-color: #42b983;">
        <van-field  label="账号" v-model="from.username"/>
        <van-field  label="密码" v-model="from.password"/>
        <van-field  label="姓名" v-model="from.name"/>
        <van-field  label="年龄" v-model="from.age"/>
        <van-radio-group v-model="from.gender" direction="horizontal">
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
        <van-field  label="手机号" v-model="from.mobile"/>
        <van-field  label="邮箱" v-model="from.email"/>
        <van-field  label="工号" v-model="from.jobnumber"/>

      <p>填写组织：<select name="" v-model="from.organization_id">
        <option :value="i.id" v-for="i in org_list" :key="i.id" >{{i.name}}</option>
      </select></p>
      <p>填写职位：<select name="" v-model="from.post_id">
        <option :value="i.id" v-for="i in post_list" :key="i.id">{{i.name}}</option>
      </select></p>
      <p>填写岗位：<select name="" v-model="from.job_id">
        <option :value="i.id" v-for="i in job_list" :key="i.id">{{i.name}}</option>
      </select></p>
        上传头像：<van-uploader :after-read="afterRead"/>
        <van-button @click="add_user">确认</van-button>
        <van-button @click="this.zt=false">关闭</van-button>
      </div>


    <table border="5" cellpadding="18">
      <tr>
        <td><input type="checkbox"></td>
        <td>姓名</td>
        <td>账号</td>
        <td>年龄</td>
        <td>性别</td>
        <td>手机号</td>
        <td>邮箱</td>
        <td>工号</td>
        <td>状态</td>
      </tr>
      <tr v-for="i in user_list" :key="i.id">
        <td><input type="checkbox"></td>
        <td>{{i.name}}</td>
        <td>{{ i.username }}</td>
        <td>{{ i.age }}</td>
        <td v-if="i.gender ==1 ">男</td>
        <td v-else>女</td>
        <td>{{ i.mobile }}</td>
        <td>{{ i.email }}</td>
        <td>{{ i.jobnumber }}</td>
        <td v-if="i.type==1">正常</td>
        <td v-else-if="i.type==2">休假</td>
        <td v-else>离职</td>
      </tr>
    </table>
  </div>



</div>
</template>

<script>
import menu from "./公共/menu";
import head from "./公共/head";
import wuxian from "./公共/wuxian";
import maxios from "../../http/axios";
import axios from "axios";

export default {
  name: "user",
  data(){
    return{
      data:[],
      from:{},
      zt:false,
      org_list:[],
      job_list:[],
      post_list:[],
      pic:'',
      user_list:[]
    }
  },
  methods:{
    get_fu(){
      maxios('com/org_add','get').then(res=>{
        this.show_list()

        this.data = res.data.list


      })
  },
    afterRead(file){
      console.log(file.file)
      let from = new FormData()
      from.append('file',file.file)
      axios({'url':'http://localhost:5000/com/pid',method:'post',data:from})
      .then(i=>{
        console.log(i.data)
        this.pic=i.data
      })
      // 此时可以自行将文件上传至服务器

    },
    add_user(){
      this.from['pic']=this.pic.file
      maxios('com/user_add','post',this.from)
      .then(i=>{
        console.log(i)
      })
    },
    show_list(){
      maxios('com/show','get')
      .then(i=>{
        this.org_list = i.data.org_list
        this.job_list = i.data.job_list
        this.post_list = i.data.post_list
        this.sho_user()
      })
    },
    sho_user(){
      maxios('com/user_add','get')
      .then(i=>{
        this.user_list = i.data.list
      })
    }
  },
  mounted() {
    this.get_fu()


  },
  components:{
    'menu1':menu,
    'head1':head,
    'wuxian':wuxian
  },
}
</script>

<style scoped>

</style>


